<template>
	<div class="container">
		<view class="title">
			<view class="img-title">
				<image style="width: 35px; height: 35px; background-color: #5676e9;border-radius: 90px;"
					mode="aspectFit" :src="imgSrc" />
				<text style="font-size: 21px;margin-left: 5px;">温泉洗浴点单系统</text>
			</view>
			<view class="dialog-box" @click="getTable">
				<text class="dialog-text"
					style="font-size: 21px;float: right;margin-right: 30rpx;">桌号：{{ tableId }}</text>
				<!-- <br><text class="dialog-text" style="font-size: 24px;">id：{{ visiteId }}</text> -->
			</view>
			<!-- 搜索框 -->
			<view style="height: 50px;background-color: transparent;margin-top: 8%;" class="search-title">
				<uni-search-bar :focus="false" v-model="searchValue" placeholder="输入商品名称进行查询" bgColor="#FFF" @cancel="cancel"
					@clear="cancel" />
			</view>
		</view>
		<!-- 左侧菜单 -->
		<div class="menu">
			<view v-for="(category, index) in categories" :key="index">
				<view href="#" :class="activeIndex===index?'leimuItem active':'leimuItem'"
					@click="handleMenuClick(index)">
					{{ category.name }}
				</view>
			</view>
		</div>
		<!-- 右侧内容 -->
		<div class="content-container">
			<div class="content-wrapper">
				<div class="content" ref="scroll">
					<div v-for="(category, index) in categories" :key="index" style="margin: 0;"
						v-if="index == activeIndex">
						<div class="icard" style="margin-top: 7%;">
							<text style="font-size: 14px;opacity:0.6;margin-left: 5%;">{{category.name}}</text>
							<view v-for="(item, key) in category.items" :key="key" v-if="search(item.name)">
								<uni-card :title="item.name" class="card" :extra="item.code" style="color: black;">
									<view class="interval">
										<text class="card-text">单价：￥<text
												style="font-size: 16px;font-weight: 700;">{{item.price}}</text></text>
									</view>
									<view class="good-counts">
										<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass"
											:show="item.show" :styles="styles">
											<uni-icons class="ico" type="minus" size="22" style="margin-right: 8px;"
												@click="minus(item,index,key)">
											</uni-icons>
											<span class="card-text">{{item.count}}</span>
										</uni-transition>
										<uni-icons class="ico" type="plus" size="22"
											style="margin-left: 8px;margin-right: 5%;" @click="plus(item,index,key)">
										</uni-icons>
									</view>
								</uni-card>
							</view>
						</div>
					</div>
					<view style="height: 14vh;"></view>
				</div>
			</div>
		</div>
		<!-- 下方购物车 -->
		<view class="under">
			<view class="goods-carts">
				<uni-row>
					<uni-col :span="16">
						<view class="cart-account" @click="checkCart">
							<!-- 角标 -->
							<uni-badge class="uni-badge-left-margin" :text="valueCart" absolute="rightTop"
								:offset="[-3,3]">
								<uni-icons class="ico-cart" type="cart" size="44"
									style="color: black;text-align: left;margin-left: 16%;">
								</uni-icons>
							</uni-badge>
							<text class="cart-count-txt" v-if="getTotalPrice()!=0">￥<text
									style="font-size: 22px;font-weight: bold">{{getTotalPrice()}}</text></text>
							<text class="card-txt" v-else>未选购商品</text>
						</view>
					</uni-col>
					<uni-col :span="8">
						<button class="buy" v-if="getTotalPrice()!=0" @click="buttonClick">去结算</button>
						<button class="connot-buy" v-else>未选购</button>
					</uni-col>
				</uni-row>
			</view>
		</view>
		<view>
			<!-- 桌号输入 -->
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" title="输入内容" placeholder="请输入桌号"
					@confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>
			<!-- 购物车弹窗 -->
			<uni-popup ref="popup" background-color="#fff" type="bottom">
				<view class="cart">
					<view class="cart-top">
						<text class="text-detail">点餐详情</text>
						<a class="clear-cart" @click="clearCart">
							<uni-icons type="trash-filled" size="22" style="margin-right: 5px;color: #a3a3a3;">
							</uni-icons><text>清空购物车</text>
						</a>
					</view>
					<view style="margin-top: 12%;" />
					<view v-for="(item,index) in informationList" :key="index" style="margin-top: 4%;"
						v-if="goodCounts[index] != 0">
						<text style="margin-left: 15px;font-size: 18px;">
							<uni-row style="margin-top: -5%;">
								<uni-col :span="12" style="padding-left: 2%;padding-right: 2%;">
									{{item.entryName}}:
								</uni-col>
								<uni-col :span="6">
									￥{{goodCounts[index]*item.unitPrice}}
								</uni-col>
								<uni-col :span="4">
									{{goodCounts[index]}}{{item.unit}}
								</uni-col>
							</uni-row>
						</text>
					</view>
					<view class="total-price">
						<text v-if="getTotalPrice()!=0">总计：￥<text
								style="font-size: 20px;font-weight: 700;">{{getTotalPrice()}}</text></text>
					</view>
					<view style="height: 15vh;"></view>
				</view>
			</uni-popup>
		</view>
	</div>
</template>

<script>
	import {
		listProject
	} from "@/api/module/wtc/project.js"
	import {
		parse
	} from "path";
	export default {
		data() {
			return {
				// 图标地址
				imgSrc: '/static/wq.png',
				// 记录点击类目的id,默认第一个激活
				activeIndex: 0,
				// 桌号
				tableId: '',
				// 游客ID
				visiteId: '',
				// 类别编号
				class: [],
				// 类别字典
				classType: {},
				classOption: [],
				// 计数
				goodCounts: [],
				// 每个各类的长度
				longOfPerClass: [],
				// 搜索条件
				searchValue: '',
				// 遮罩层
				loading: false,
				// 总条数
				total: 0,
				// 购物车角标值
				valueCart: 0,
				// 项目信息表格数据
				informationList: [],
				// 查询参数
				queryParams: {
					entryName: null,
					projectCategory: null,
					firstLevelClassification: null,
					secondaryClassification: null,
					tertiaryClassification: null,
					projectCode: null,
					mnemonicCode: null,
					unit: null,
					unitPrice: null,
					commissionPrice: null,
					clockUpTime: null,
					note1: null,
					note2: null,
					note3: null,
					note4: null,
					note5: null,
					note6: null,
					note7: null,
					note8: null,
					note9: null,
					note10: null
				},
				categories: [],
				// 判断购物车是否打开
				cartOpen: false,
				// 控制减号和数量动画
				// 向右消失
				modeClass: ['fade', 'slide-right'],
				// 样式
				styles: {},
			}
		},
		// 左上角返回按钮
		onBackPress(options) {
			let self = this;
			if (options.from === 'navigateBack') {
				return false;
			}
			// console.log("要指定返回的页面");
			const table = this.tableId
			uni.switchTab({
				url: '/pages/module/wtc/login?table=' + table
			})
			return true;
		},
		created() {
			const id = this.$route.query.id
			const table = this.$route.query.table
			const list = this.$route.query.list
			const c = this.$route.query.count
			const val = this.$route.query.totalVal
			// console.log(val)
			if (id != '' && id != undefined) {
				this.visiteId = this.$route.query.id
			} else {
				this.visiteId = new Date().getTime()
			}
			if (table != undefined && table != '' && table != null) {
				this.tableId = table
			}
			// console.log(list)
			if (c != null) {
				this.valueCart = parseInt(c)
			}
			this.getDicts("yqg_first_level_classification").then(res => {
				this.classOption = res.data
				for (let i = 0; i < this.classOption.length; i++) {
					this.classType[this.classOption[i].dictValue] = this.classOption[i].dictLabel
				}
			})
			this.getList(list)
		},
		onLoad() {
			this.styles = {
				float: 'right',
				display: 'flex',
				alignItems: 'center',
				marginBottom: '-1%',
			}
		},
		mounted() {
			// 监听滚动事件，实现左右联动效果
			// this.$refs.scroll.addEventListener('scroll', this.handleScroll)
		},
		methods: {
			// 显示转换
			typeChange(classType) {
				return this.classType[classType]
			},
			// 查询项目信息列表
			getList(list) {
				this.loading = true;
				listProject(this.queryParams).then(response => {
					this.informationList = response.rows;
					this.total = response.total;
					this.loading = false;
					// this.goodCounts.length = this.informationList.length
					for (let i = 0; i < this.informationList.length; i++) {
						this.goodCounts[i] = 0
						if (this.class.includes(this.informationList[i].firstLevelClassification)) {
							continue;
						} else {
							this.class.push(this.informationList[i].firstLevelClassification)
						}
					}
					if (list != undefined) {
						this.goodCounts = list.split(',')
						for (let i = 0; i < this.goodCounts.length; i++) {
							this.goodCounts[i] = parseInt(this.goodCounts[i])
						}
						// console.log(this.goodCounts)
					}
					// console.log(this.class)
					// 数据处理
					for (let i = 0; i < this.class.length; i++) {
						this.categories.push({
							name: this.typeChange(this.class[i]),
							items: [],
						})
						for (let j = 0; j < this.informationList.length; j++) {
							if (this.informationList[j].firstLevelClassification == this.class[i]) {
								if (this.goodCounts[j] == 0) {
									this.categories[i].items.push({
										name: this.informationList[j].entryName,
										price: this.informationList[j].unitPrice,
										code: this.informationList[j].projectCode,
										count: this.goodCounts[j],
										show: false,
									})
								} else {
									this.categories[i].items.push({
										name: this.informationList[j].entryName,
										price: this.informationList[j].unitPrice,
										code: this.informationList[j].projectCode,
										count: this.goodCounts[j],
										show: true,
									})
								}
							}
						}
					}
					this.getTotalPrice()
					// const height = window.innerHeight
					// for (let i = 0; i < this.categories.length; i++) {
					// 	if (i == 0) {
					// 		// this.longOfPerClass.push(this.categories[i].items.length * 123 + 36)
					// 		this.longOfPerClass.push(height * 0.20)
					// 	} else {
					// 		this.longOfPerClass.push(this.longOfPerClass[i - 1] - (this.categories[i - 1].items
					// 			.length * 122.5 + 36))
					// 	}
					// }
					// console.log(this.longOfPerClass)
				});
			},
			// 下单
			buttonClick(e) {
				if (this.tableId == '' || this.tableId == null) {
					this.$refs.inputDialog.open()
					return
				}
				const vId = this.visiteId
				const tId = this.tableId
				const list = this.goodCounts
				const c = this.valueCart
				this.$tab.navigateTo('/pages/module/wtc/info?id=' + vId + '&table=' + tId + '&list=' + list + '&count=' +
					c)
			},
			// 弹窗
			getTable() {
				this.$refs.inputDialog.open()
			},
			// 弹窗输入桌号
			dialogInputConfirm(val) {
				this.tableId = val;
			},
			// 搜索清除和取消
			cancel() {
				this.searchValue = ''
			},
			// 搜索
			search(name) {
				if (this.searchValue == '') {
					return true
				} else {
					if (name.includes(this.searchValue)) {
						return true
					} else {
						return false
					}
				}
			},
			// 查看购物车
			checkCart() {
				// console.log(1)
				if (this.valueCart == 0) {
					return
				}
				if (this.cartOpen) {
					this.$refs.popup.close()
					this.cartOpen = !this.cartOpen
				} else {
					this.$refs.popup.open()
					this.cartOpen = !this.cartOpen
				}
				// this.$refs.popup.open()
			},
			handleMenuClick(index) {
				// 点击左侧菜单项，更新对应的右侧内容项
				this.activeIndex = index
				// this.scrollToItem(index)
			},
			// handleScroll() {
			// 	// 监听右侧内容的滚动事件，实现左右联动效果
			// 	const items = this.$refs.scroll.querySelectorAll('.icard')
			// 	const menuItems = this.$el.querySelectorAll('.menu view view')
			// 	let activeIndex = 0
			// 	const rect = items[0].getBoundingClientRect()
			// 	// console.log(rect)
			// 	// console.log(window.innerHeight) // 手机屏高
			// 	// for (let i = 0; i < items.length; i++) {
			// 	// 	const rect = items[i].getBoundingClientRect()
			// 	// 	if (i == 0) {
			// 	//      console.log(rect)
			// 	// 	}
			// 	// 	if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
			// 	// 		activeIndex = i
			// 	// 		break
			// 	// 	}
			// 	// }
			// 	for (let i = this.longOfPerClass.length; i >= 0; i--) {
			// 		if (rect.top < this.longOfPerClass[i]) {
			// 			activeIndex = i
			// 			break
			// 		}
			// 	}
			// 	if (this.activeIndex !== activeIndex) {
			// 		this.activeIndex = activeIndex
			// 		menuItems.forEach((el, index) => {
			// 			if (index === activeIndex) {
			// 				el.classList.add('active')
			// 			} else {
			// 				el.classList.remove('active')
			// 			}
			// 		})
			// 	}
			// },
			// scrollToItem(index) {
			// 	// 滚动到对应的右侧内容项
			// 	const items = this.$refs.scroll.querySelectorAll('.content > div')
			// 	const item = items[index]
			// 	if (item) {
			// 		const {
			// 			top
			// 		} = item.getBoundingClientRect()
			// 		let distance = window.innerHeight * 0.15
			// 		this.$refs.scroll.scrollTop += (top - distance)
			// 	}
			// },
			// 减少菜品
			minus(item, index, key) {
				if (index != 0) {
					var idx = 0
					for (let i = 0; i < index; i++) {
						idx += this.categories[i].items.length
					}
					if (this.goodCounts[idx + key] > 0) {
						this.goodCounts[idx + key] -= 1
						if (this.valueCart > 0) {
							this.valueCart -= 1
						}
					}
					if (item.count > 0) {
						item.count -= 1
					}
				} else {
					if (this.goodCounts[key] > 0) {
						this.goodCounts[key] -= 1
						if (this.valueCart > 0) {
							this.valueCart -= 1
						}
						// console.log(this.goodCounts[index])
					}
					if (item.count > 0) {
						item.count -= 1
					}
				}
				if (item.count == 0) {
					item.show = false
				}
			},
			// 增加菜品
			plus(item, index, key) {
				if (item.count == 0) {
					item.show = true
				}
				if (index != 0) {
					var idx = 0
					for (let i = 0; i < index; i++) {
						idx += this.categories[i].items.length
					}
					this.goodCounts[idx + key] += 1
					this.valueCart += 1
					item.count += 1
				} else {
					this.goodCounts[key] += 1
					this.valueCart += 1
					item.count += 1
				}
				// console.log(this.goodCounts)
			},
			// 清空购物车
			clearCart() {
				this.valueCart = 0
				for (let i = 0; i < this.goodCounts.length; i++) {
					this.goodCounts[i] = 0
				}
				for (let i = 0; i < this.categories.length; i++) {
					for (let j = 0; j < this.categories[i].items.length; j++) {
						this.categories[i].items[j].count = 0
					}
				}
			},
			// 计算总价
			getTotalPrice() {
				let totalVal = 0
				for (let i = 0; i < this.categories.length; i++) {
					for (let j = 0; j < this.categories[i].items.length; j++) {
						totalVal += (parseFloat(this.categories[i].items[j].price) * parseInt(this.categories[i].items[j]
							.count))
					}
				}
				return totalVal
			},
		},
	}
</script>

<style>
	@font-face {
		font-family: "cardText";
		src: url(/static/STFANGSO.ttf);
	}
	
	.search-title {
		position: absolute;
		left: 2%;
		right: 2%;
		/* top: 1%; */
	}

	.dialog-box {
		position: relative;
	}

	.dialog-text {
		position: absolute;
		right: 3%;
		margin-top: 1%;
		font-size: 24px;
		float: right;
	}

	.container {
		font-family: cardText;
		display: flex;
		height: 100vh;
		overflow: hidden;
		background-color: white;
	}

	.img-title {
		float: left;
		display: flex;
		margin-left: 2%;
		margin-top: 1%;
	}

	.title {
		height: 78px;
		margin-top: 0;
		width: 100%;
		background-color: white;
		position: fixed;
		z-index: 9;
	}

	.menu {
		/* width: 60px; */
		/* 将菜单宽度缩小为160px */
		/* height: 100%; */
		background-color: #f8f8f8;
		overflow-y: auto;
		width: 20%;
		height: 100%;
		/* background-color: aqua; */
		display: inline-block;
		position: fixed;
		padding-top: 4%;
		margin-top: 18%;
		/* top: 14.5%; */
		font-size: 16px;
	}

	.content {
		/* flex: 1; */
		/* padding: 20px; */
		height: 100%;
		overflow-y: auto;
		/* width: calc(120% - 160px); */
		width: 100%;
		/* 增加右侧内容宽度 */
	}

	.content-container {
		width: 80%;
		background-color: white;
		display: flex;
		justify-content: center;
		margin-left: 20%;
		margin-top: 14.5%;
		padding-top: 5.5%;
		/* margin-bottom: 15%; */
	}

	.content-wrapper {
		/* max-width: 800px; */
		width: 100%;
	}

	.content>div {
		/* margin-top: 40px; */
		opacity: 1;
		transition: opacity 0.3s ease;
		width: 100%;
	}

	.leimuItem {
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		/* font-weight: 600; */
		margin-bottom: 10%;
	}

	.active {
		color: #55aaff;
		border-left: 5px solid #55aaff;
		background-color: #fff;
	}

	.under {
		position: fixed;
		top: 97%;
		height: 8%;
		width: 100%;
		left: 80px;
		right: 0;
		z-index: 99999;
		background-color: rgba(255, 255, 255, 0.7);
		/* background-color: white; */
		/* opacity: 0.6; */
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		height: 46px;
		bottom: 3%;
		background-color: white;
		margin-left: 4%;
		margin-right: 4%;
		width: 92%;
		border-radius: 50px;
	}

	.cart {
		margin-bottom: 10%;
		max-height: 500px;
		/* height: 500px; */
		overflow-y: auto;
	}

	.text-detail {
		/* margin-left: 2%; */
		padding-left: 1%;
		padding-top: 1.5%;
		font-size: 24px;
		font-weight: bold;
		position: fixed;
		background-color: white;
	}

	.good-counts {
		float: right;
		display: flex;
		margin-left: 75%;
		align-items: center;
		margin-bottom: 4%;
	}

	.clear-cart {
		margin-top: 3.5%;
		margin-left: 68%;
		margin-right: 2%;
		display: flex;
		align-items: center;
		position: fixed;
		background-color: white;
		color: #a3a3a3;
	}

	.total-price {
		position: fixed;
		bottom: 1px;
		background-color: white;
		padding-left: 60%;
		padding-bottom: 110px;
	}

	.cart-account {
		display: flex;
		align-items: center;
	}

	.cart-count-txt {
		color: #000000;
		margin-left: 7%;
	}

	.card-txt {
		color: #000000;
		margin-left: 7%;
	}

	.buy {
		background-color: #55aaff;
		border: #55aaff;
		color: #000000;
		border-radius: 50px;
		height: 120%;
		font-weight: 550;
	}

	.connot-buy {
		background-color: #999999;
		border: #999999;
		color: white;
		border-radius: 50px;
		height: 120%;
		font-weight: 550;
	}
	
	.card{
		font-family: cardText;
	}
</style>
